<script setup>
import {cloudStorage} from  '@/api/app.js'
import { onMounted,ref, reactive } from 'vue'
// import { onMounted, reactive, getCurrentInstance, computed, ref,reactive } from 'vue';
const formSize = ref('default')
const ruleFormRef = ref()
const ruleFormRef3 = ref()
const ruleFormRef4 = ref()
const ruleForm = reactive({
	name: '',
	customdomainname: true,
	domainname: '',
	accessKeyId: '',
	AccessKeySecret: ''
})
const ruleFormtx = reactive({
	storagespacename: '',
	region: '',
	txCustomdomainname: '',
	SecretId: '',
	SecretKey: ''
})
const ruleFormqn = reactive({
	name: '',
	domainname: '',
	accessKeyId: '',
	accessKeySecret: ''
})
const rules = reactive({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const rules3 = reactive({
	storagespacename: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const rules4 = reactive({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const submitForm2 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!2')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const submitForm3 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!3')
		} else {
			console.log('error submit!', fields)
		}
	})
}
const submitForm4 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!4')
		} else {
			console.log('error submit!', fields)
		}
	})
}


const getList = ()=>{
	 //调用接口
            cloudStorage()
            .then((res) => {
                //成功返回res
                console.log(res);
            })
            .catch((err) => {
                //失败返回err
                console.log(err);
								console.log('导入成功呢了吗')
            });
}
const radio1 = ref('1')
const radioChange = (label) => {
	radio1.value = label
}
 //监听
	onMounted(() => {
		console.log('调用了生命周期')
            getList();
	});
</script>
<template>
	<div >
		<div class="contentCenter">
	<div class="topStyle">
			<div class="StorageLocationStyle">存储位置</div>
			<div class="mb-2 flex items-center text-sm">
				<el-radio-group v-model="radio1" class="ml-4" @change="radioChange">
					<el-radio label="1" size="large">本地服务器</el-radio>
					<el-radio label="2" size="large">阿里云OSS</el-radio>
					<el-radio label="3" size="large">腾讯云OSS</el-radio>
					<el-radio label="4" size="large">七牛云存储</el-radio>
				</el-radio-group>
			</div>
		</div>
			<div class="contentCenterChild">
				<div class="">
			 <div v-if="radio1 === '1'" class="localServerStyle">
				中间组件-选择存储到本地服务器，无需配置信息
			</div>
			<div v-if="radio1 === '2'">
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					label-width="190px"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
				 <el-form-item label="存储空间名称(Bucket)" prop="name">
						<el-input v-model="ruleForm.name" style="width:280px"  placeholder="请输入存储空间名称" />
					</el-form-item> 
					<el-form-item label="使用自定义域名" prop="">
						<el-switch v-model="ruleForm.customdomainname" />
					</el-form-item> 
					<el-form-item label="域名(Endpoint)" prop="name">
						<el-input v-model="ruleForm.domainname"  style="width:280px ;" placeholder="请输入域名" />
				<div class="lightFont"> 示例: http://oss-xx-xxx-1.aliyuncs.com 或 http://mydomain.com </div>
					</el-form-item>
					
					<el-form-item label="AccessKey ID" prop="name">
						<el-input v-model="ruleForm.accessKeyId"  style="width:280px" placeholder="请输入AccessKey ID" />
					</el-form-item>
					<el-form-item label="AccessKey Secret" prop="name">
						<el-input v-model="ruleForm.AccessKeySecret" style="width:280px"  placeholder="请输入AccessKey Secret" />
					</el-form-item>
				</el-form>
			</div>
			<div v-if="radio1 === '3'">
				<el-form
					ref="ruleFormRef3"
					:model="ruleFormtx"
					:rules="rules3"
						label-width="190px"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
					<el-form-item label="存储空间名称(Bucket)" prop="storagespacename">
						<el-input v-model="ruleFormtx.storagespacename" style="width:280px" placeholder="请输入存储空间名称" />
					</el-form-item>
					<el-form-item label="所属地域" prop="storagespacename">
						<el-input v-model="ruleFormtx.region" style="width:280px;"  placeholder="请输入域名" />
					 <span class="lightFont"> 示例: ap-shanghai 或 ap-shenzhen 或 ap-xxxxxx</span>
					</el-form-item>
					<el-form-item label="自定义域名" prop="storagespacename">
						<el-input v-model="ruleFormtx.txCustomdomainname" style="width:280px;"  placeholder="请输入域名" />
						<span class="lightFont">示例: http://mydomain.com</span>  
					</el-form-item>
					<el-form-item label="SecretId" prop="storagespacename">
						<el-input v-model="ruleFormtx.SecretId"  style="width:280px" placeholder="请输入AccessKey ID" />
					</el-form-item>
					<el-form-item label="SecretKey" prop="storagespacename">
						<el-input v-model="ruleFormtx.SecretKey"  style="width:280px" placeholder="请输入AccessKey Secret" />
					</el-form-item>
				</el-form>
			</div>
			<div v-if="radio1 === '4'">
				<el-form
					ref="ruleFormRef4"
					:model="ruleFormqn"
					:rules="rules4"
						label-width="190px"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
					<el-form-item label="存储空间名称(Bucket)" prop="name">
						<el-input v-model="ruleFormqn.name"  style="width:280px" placeholder="请输入存储空间名称" />
					</el-form-item>

					<el-form-item label="绑定域名" prop="name">
						<el-input v-model="ruleFormqn.domainname" style="width:280px;"  placeholder="请输入域名" />
						<span class="lightFont">实例：http://www.baidu.com</span>
					</el-form-item>
					<el-form-item label="AccessKey ID" prop="name">
						<el-input v-model="ruleFormqn.accessKeyId" style="width:280px"  placeholder="请输入AccessKey ID" />
					</el-form-item>
					<el-form-item label="AccessKey Secret" prop="name">
						<el-input v-model="ruleFormqn.accessKeySecret"  style="width:280px" placeholder="请输入AccessKey Secret" />
					</el-form-item>
				</el-form>
			</div> 
			</div>
			</div>
			<div class="stationPosition"></div>
		</div>
		<div class="preservationStyle" v-if="radio1==='2'">
					<el-button type="primary" @click="submitForm2(ruleFormRef)">保存</el-button>
				</div>
				<div class="preservationStyle" v-if="radio1==='3'">
					<el-button type="primary" @click="submitForm3(ruleFormRef3)">保存</el-button>
				</div>
				<div class="preservationStyle" v-if="radio1==='4'">
					<el-button type="primary" @click="submitForm4(ruleFormRef4)">保存</el-button>
				</div>

	</div>
</template>
<style scoped>
.topStyle {
	display: flex;
	background-color: #ffffff;
	border-radius: 10px;
  padding: 10px 10px 0 103px;
	margin: 20px;
}
.localServerStyle{
	height: 262px;
	font-size: 14px;
	margin-left: 189px;
}
.lightFont{
	color:#a8abb2 ;
	font-size: 14px;
}
.preservationStyle {
	position:fixed;
	padding:10px;
	width:100%;
	padding-left:45%;
	background-color: #ffffff;
	bottom:10px;
	
}
.contentCenter {
	margin: 20px;
	padding: 10px;
	border-radius: 15px;
	background-color: #ffffff;

}
.contentCenterChild{
	width: 50%;
}
/* .input /deep/ .el-input__inner {
  margin-bottom: 25px;
	
} */
 /* .el-input {
    width: 280px;
  } */
.el-input__inner::placeholder {
 font-size: 14px;
}

.el-form-item{
    margin-bottom: 24px;
		width: 600px;
}
.StorageLocationStyle {
	margin-top: 8px;
	margin-right: 10px;
	color: #606266;
	font-size: 14px;
}
 
.stationPosition{
	height: 35px;
}

</style>
